import React, { useEffect } from "react";
import { Modal, Form, Row, Col } from "antd";
import XlSelect from "@/components/Form/XlSelect";
import { modalPropsType } from '@/constants/types';
import { useModel } from "@umijs/max";
import { useRequest } from "ahooks";
import { getLabelByKey } from "@/utils/util";
import { fetchDomesticWhOptions, fetchServiceProviderOptions } from "@/pages/BasicInfo/services";

const {Item} = Form;
const rules = [{required: true, message: '此项必填'}];
const layout = {
  labelCol: {
    span: 5
  }
}

const LpsLineUpdateModal = ({title, currentRow, onSubmit, loading, onCancel, visible}: modalPropsType ) => {
  const [form] = Form.useForm();
  const {data: warehouseList} = useRequest(fetchDomesticWhOptions);
  const {data: shipList} = useRequest(async () => {
    const res = await fetchServiceProviderOptions({type: 'ship'});
    return res || [];
  });
  const {getDict} = useModel('dictModel');
  const countrys = getDict('country');
  const prdList = getDict('prdType');
  const sportList = getDict('sport');
  const dportList = getDict('dport');

  const handleSubmit = async () => {
    const res = await form.validateFields();
    onSubmit({
      id: currentRow ? currentRow?.id : undefined,
      country: res?.country,
      countryName: getLabelByKey({list: countrys, key: res?.country}),
      product: res?.product,
      productName: getLabelByKey({list: prdList, key: res?.product}),
      sportCode: res?.sportCode,
      sportName: getLabelByKey({list: sportList, key: res?.sportCode}),
      dportCode: res?.dportCode,
      dportName: getLabelByKey({list: dportList, key: res?.dportCode}),
      shipCodes: res?.shipCodes?.join(','),
      shipNames: getLabelByKey({list: shipList, key: res?.shipCodes, dataValue: 'code', dataLabel:'name'}).join(','),
      cwhCodes: res?.cwhCodes?.join(','),
      cwhNames: getLabelByKey({list: warehouseList, key: res?.cwhCodes, dataValue: 'code', dataLabel:'name'}).join(','),
    });
  }

  useEffect(() => {
    if (currentRow?.id) {
      form.setFieldsValue({
        ...currentRow,
        shipCodes: currentRow?.shipCodes ? currentRow?.shipCodes?.split(',') : [],
        cwhCodes: currentRow?.cwhCodes ? currentRow?.cwhCodes?.split(',') : [],
      });
    }
  }, [currentRow?.id])
  
  return (
    <Modal
      title={title}
      open={visible}
      width="800px"
      maskClosable={false}
      confirmLoading={loading}
      onOk={handleSubmit}
      onCancel={onCancel}
     >
      <Form form={form} {...layout}>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="country" rules={rules} label="国家">
              <XlSelect
                allowClear
                disabled={!!currentRow}
                options={countrys}
                dataLabel="dictLabel"
                dataValue="dictValue"
              />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="product" rules={rules} label="产品名称">
              <XlSelect
                allowClear
                disabled={!!currentRow}
                options={prdList}
                dataLabel="dictLabel"
                dataValue="dictValue"
              />
            </Item>
          </Col>
          <Col span={12}>
            <Item name="shipCodes" rules={rules} label="船司">
              <XlSelect
                mode="multiple"
                allowClear
                options={shipList}
                dataLabel="name"
                dataValue="code"
              />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="sportCode" rules={rules} label="起始地">
              <XlSelect
                allowClear
                disabled={!!currentRow}
                options={sportList}
                dataLabel="dictLabel"
                dataValue="dictValue"
              />
            </Item>
          </Col>
          <Col span={12}>
            <Item name="dportCode" rules={rules} label="目的港">
              <XlSelect
                allowClear
                disabled={!!currentRow}
                options={dportList}
                dataLabel="dictLabel"
                dataValue="dictValue"
              />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="cwhCodes" rules={rules} label="收货仓库">
              <XlSelect
                mode="multiple"
                allowClear
                options={warehouseList}
                dataLabel="name"
                dataValue="code"
              />
            </Item>
          </Col>
        </Row>
      </Form>
     </Modal>
  );
}
export default LpsLineUpdateModal;